<template>
	<div>
		<el-dialog
			title="日志详情"
			width="90%"
			:visible.sync="outerVisible"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			:show-close="false"
		>
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span
						>IP：{{ InfoData.IP }}，日志文件完整路径：{{
							InfoData.LOGNAME
						}}</span
					>
					<el-button
						style="float: right; padding: 3px 0"
						type="text"
						@click="closeOuterVisible"
						>退出日志详情</el-button
					>
				</div>
				<div class="card-table">
					<el-table
						:data="InfoData.data"
						:fit="true"
						border
						style="width: 100%"
					>
						
							<el-table-column type="index" align="center">
							</el-table-column>
							<el-table-column
								prop="logPath"
								label="日志文件路径"
								width="540"
							>
                            
							</el-table-column>
							<el-table-column prop="creteTime" label="创建时间">
                               
							</el-table-column>
							<el-table-column prop="edit" label="操作">
                                <template v-slot="scope">
                                    <el-button
									type="primary"
									plain
									@click="infoClick(scope.row)"
									>查看</el-button
								>
                                  
                                </template>
								
							</el-table-column>
						
					</el-table>
					<v-pagination
						:dataTotal="dataTotal"
						:curPage="postData.curPage"
						:pageSize="postData.pageSize"
						@getCurPage="getPaginationCurPage"
						@getPageSize="getPaginationPageSize"
					>
					</v-pagination>
				</div>
			</el-card>

			<el-dialog
				width="80%"
				title=""
				:visible.sync="innerVisible"
				append-to-body
				:close-on-click-modal="false"
				:close-on-press-escape="false"
				:show-close="false"
			>
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>日志监控告警详情</span>
						<el-button
							style="float: right; padding: 3px 0"
							type="text"
							@click="innerVisible = false"
							>推出日志监控告警详情</el-button
						>
					</div>
					<div class="infoDiv">
						<div class="info-div-span">
							<span>日志文件完整路径:</span>
							<span>{{info.logPath}}</span
							>
						</div>
						<div class="info-div-span">
							<span>时间:</span>
							<span>{{info.time}}</span>
						</div>
						<div class="info-div-span">
							<span>告警内容:</span>
							<span
								>{{info.WarningLogContent}}</span
							>
						</div>
					</div>
				</el-card>
			</el-dialog>
			<div slot="footer" class="dialog-footer"></div>
		</el-dialog>
	</div>
</template>

<script>
import vPagination from 'common/Pagination.vue';
export default {
	props: ['InfoData', 'outerVisible'],
	components: {
		vPagination,
	},
	data() {
		return {
			innerVisible: false,
			postData: {
				opera: '',
				curPage: 1,
				pageSize: 10000,
			},
			info: {
				logPath: '',
				time: '',
				WarningLogContent: '',
			},
			dataTotal: 200,
		};
	},
	methods: {
		closeOuterVisible() {
			this.$emit('closeOuterVisible');
		},
		getPaginationCurPage(val) {
			this.InfoData.postData.curPage = val;

			this.$emit('InfoDialog',{IP:this.InfoData.IP,LOGNAME:this.InfoData.LOGNAME});
		},
		getPaginationPageSize(val) {
			// 分页大小改变之后，重置当前页码为 1
			this.InfoData.postData.curPage = 1;
			this.InfoData.postData.pageSize = val;

			this.$emit('InfoDialog',{IP:this.InfoData.IP,LOGNAME:this.InfoData.LOGNAME});
		},
		infoClick(row) {
            this.info.logPath=row.logPath,
            this.info.time=row.creteTime,
            this.info.WarningLogContent=row.WarningLogContent
			this.innerVisible = true;
		},
	},
};
</script>

<style>
.info-div-span {
	display: grid;
	column-gap: 10px;
}
.infoDiv {
	display: grid;
	row-gap: 10px;
}
</style>
